<!--
 * @Author: June
 * @Description: 
 * @Date: 2024-07-24 17:22:41
 * @LastEditors: June
 * @LastEditTime: 2024-07-26 22:15:39
 * @FilePath: /element-fabric-editor/index.html
-->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%- APP_TITLE %></title>
    <meta
      name="keywords"
      content="开源在线设计工具,开源图片编辑器,图片编辑,fabric.js图片编辑器,Vue图片编辑器, 海报编辑开源工具, js图片编辑器, 快图设计, vue-fabric-editor"
    />
    <meta
      name="description"
      content="让企业和开发者轻松构建在线设计工具，简单易用的界面，快速的开发流程，便捷的扩展功能，二次开发毫无压力。"
    />
    <style>
      ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }

      ::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.2);
      }

      ::-webkit-scrollbar-track {
        border-radius: 0;
        background: rgba(0, 0, 0, 0.1);
      }
    </style>
  </head>

  <body>
    <div id="app">
       <style>
        html,
        body,
        #app {
          width: 100%;
          height: 100%;
        }
        .loading-box {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
        }
        .loading-box .loading-wrap {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 98px;
        }
        .dot {
          position: relative;
          box-sizing: border-box;
          display: inline-block;
          width: 32px;
          height: 32px;
          font-size: 32px;
          transform: rotate(45deg);
          animation: ant-rotate 1.2s infinite linear;
        }
        .dot i {
          position: absolute;
          display: block;
          width: 14px;
          height: 14px;
          background-color: #409eff;
          border-radius: 100%;
          opacity: 0.3;
          transform: scale(0.75);
          transform-origin: 50% 50%;
          animation: ant-spin-move 1s infinite linear alternate;
        }
        .dot i:nth-child(1) {
          top: 0;
          left: 0;
        }
        .dot i:nth-child(2) {
          top: 0;
          right: 0;
          animation-delay: 0.4s;
        }
        .dot i:nth-child(3) {
          right: 0;
          bottom: 0;
          animation-delay: 0.8s;
        }
        .dot i:nth-child(4) {
          bottom: 0;
          left: 0;
          animation-delay: 1.2s;
        }

        @keyframes ant-rotate {
          to {
            transform: rotate(405deg);
          }
        }

        @keyframes ant-spin-move {
          to {
            opacity: 1;
          }
        }
      </style>
      <div class="loading-box">
          <div class="loading-wrap">
              <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
          </div>
      </div>
    </div>
    <script type="module" src="./src/main.ts"></script>
  </body>
  <script>
    var _hmt = _hmt || []
    ;(function () {
      var hm = document.createElement('script')
      hm.src = 'https://hm.baidu.com/hm.js?147609b3a2b7f053b2e7c7331a6c5058'
      var s = document.getElementsByTagName('script')[0]
      s.parentNode.insertBefore(hm, s)
    })()
  </script>
</html>
